<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="设置考勤人员" width="1300px" @ok="handleSubmit" destroyOnClose>
    <div style="font-size:18px;color:#000;padding-left: 20px;">当前设备：{{deviceName}}</div>
    <BasicTable @register="registerTable"  >
     <template #tableTitle>
          <a-button type="primary"  @click="handleOpen" preIcon="ant-design:plus-outlined"> 添加考勤人员</a-button>
      </template>
        <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <PersonListSelect :params="params" @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" ></PersonListSelect>

    <!-- <PersonSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" ></PersonSelectModal> -->

  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref, toRaw, } from 'vue';
  import { BasicModal, useModalInner } from '/src/components/Modal';
  import { BasicTable, useTable, TableAction } from '/src/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import { useModal } from '/@/components/Modal';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { personColumns, personSearchFormSchema } from '../SsDevice.data';
  import { checkonPersonlist ,checkonDeleteOne,checkonSave} from '../SsDevice.api';
  // import PersonSelectModal from '@/components/Form/src/jeecg/components/modal/PersonSelectModal.vue';
  import PersonListSelect from '@/views/dormitory/ssdevice/components/PersonListSelect.vue'
  
 // 声明Emits
  const emit = defineEmits(['select', 'register']);
  const checkedKeys = ref<Array<string | number>>([]);
  const [regModal, { openModal }] = useModal();
  const attrs = useAttrs();
  const getBindValue = ref({});
  const selectOptions = ref([]);
  const deviceId = ref('')
  const deviceName = ref('')
  //注册table数据
  let params = ref({
    flag:0,
    deviceId: '',
    // buildId:''
  })
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async(data)=>{
     //重置表单
     console.log("******************");
     console.log(data.record);
     deviceId.value =  data.record.id
     console.log("******************ID" + data.record.id);
     deviceName.value =  data.record.deviceName
     params.value = {
        flag:1,
        deviceId:  data.record.id,
     }
	 console.log("******************device==" + params.value.deviceId);
    setProps({ searchInfo: { deviceId: data.record.id } });
    // reload();
  });
 const { tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '添加考勤人员',
           api: checkonPersonlist,
           columns :personColumns,
           canResize:false,
           rowKey:'id',
           formConfig: {
              labelWidth: 65,
              schemas: personSearchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
           actionColumn: {
               width: 220,
               fixed:'right'
            },
      },
     
  })
  const [registerTable, {reload,getForm,setProps},{  }] = tableContext
  const tag = ref(false);
  function handleOpen() {
        tag.value = true;
        openModal(true, {
          data: params.value,
          isUpdate: false,
        });
  }
  let selectValues = ref({
        value: [],
        change: false,
  })
  let personIds = ref('')
// const [state] = useRuleFormItem(props, 'value', 'change', emitData);
  function setValue(options, values) {
		if(!options || options.length == 0) return;
        selectOptions.value = options;
        //emitData.value = values.join(",");
        // state.value = values;
        selectValues.value = values;
        //update-begin-author:liusq date:20230517 for:选择职务组件v-model方式绑定值不生效
        personIds.value = values.join(',')
        console.log(personIds.value);
        checkonSave({
          deviceId:deviceId.value,
          personId:personIds.value
        }).then(res=>{
          reload()
        })
        // emit('update:value', values.join(','));
        //update-begin-author:liusq date:20230517 for:选择职务组件v-model方式绑定值不生效

  }
  /**
   * 选择列配置
   */
  const rowSelection = {
    type: 'checkbox',
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange,
  };
  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[]) {
    checkedKeys.value = selectedRowKeys;
  }

  //提交事件
  function handleSubmit() {
    setModalProps({ confirmLoading: true });
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('select', toRaw(unref(checkedKeys)));
    setModalProps({ confirmLoading: false });
  }
  function getTableAction(record){
       return [
        //  {
        //    label: '启用',
        //    onClick: handleStatus.bind(null, record),
        //  },
        //  {
        //    label: '停用',
        //    popConfirm: {
        //      title: '是否确认停用',
        //      confirm: handleStatus.bind(null, record),
        //      placement: 'topLeft',
        //    }
        //  },
         {
           label: '删除',
           popConfirm: {
             title: '是否确认删除',
             confirm: handleDelete.bind(null, record),
             placement: 'topLeft',
           }
         }
       ]
   }
   function handleStatus(e){
    console.log(e);
    if(e.status=='1'){
      switchPersonManStatus({
        id:e.id,
        status: '0'
      }).then(res=>{
        reload();
      })
    }else if(e.status=='0'){
      switchPersonManStatus({
        id:e.id,
        status: '1'
      }).then(res=>{
               reload();
      })
    }
  } 

   async function handleDelete(record) {
     await checkonDeleteOne({id: record.id}, reload);
   }

</script>
